Vue3 个人记录

MuYan2022-04-20VueVue

ElementPlus 按需引入 Icon

npm i unplugin-auto-import unplugin-vue-components unplugin-icons -D

ElementPlus 官方配置open in new window

  • 关键点安装 ep icon 依赖,这个依赖不会自动安装
npm i @iconify-json/ep -D
  • 使用
<i-ep-search />

<icon-ep-search />

ElementPlus 自定义主题

// vite.cofnig.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import * as path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    //配置自动导入element start
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 自定义主题色,不添加此行将会导致API组件(ElMessage,ElNotification)默认的主题色会覆盖自定义的主题色
          importStyle: "sass",
        }),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          // 自动引入修改主题色添加这一行
          importStyle: "sass",
        }),
      ],
    }),
  ],
  //配置@符
  resolve: {
    alias: {
      "@": path.join(__dirname, "src"),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/style/element/index.scss" as *;`,
      },
    },
  },
});

...待更新

上次更新 2026/6/23 11:49:15
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8